<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-13 14:11:07
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-04-13 23:36:58
 -->
<template>
  <div class="user">
    <div class="user-box">
      <div class="user-content pd20-10">
        <div class="clearfix">
          <div class="fl week_type">
            <span :class="{active:rangeDay === 30}" @click="getSportList(30)">最近一个月</span>
            <span :class="{active:rangeDay === 14}" @click="getSportList(14)">最近两周</span>
            <span :class="{active:rangeDay === 7}" @click="getSportList(7)">最近一周</span>
          </div>
          <div class="fr">
            <el-date-picker v-model="datepicker" type="daterange" size="small" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
            <el-button type="primary" size="small" @click="getSportList()">搜索</el-button>
          </div>
        </div>
        <!-- echarts -->
        <div :id="id" style="width:1000px; height:500px;margin-top: 40px;" />
      </div>
    </div>
    <div class="user-box">
      <div class="tit">详细数据</div>
      <div class="user-content pd20-10">
        <div class="weight-data-box">
          <div class="custom-table">
            <el-table :data="sportData" :header-row-class-name="'bg'" border max-height="400">
              <el-table-column label="日期" align="center">
                <template slot-scope="scope">
                  {{ scope.row[0] }}
                </template>
              </el-table-column>
              <el-table-column label="运动（步）" align="center">
                <template slot-scope="scope">
                  {{ +scope.row[1] }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <loading v-if="loadfull" />
  </div>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import loading from '@/views/components/loading1'
import { formatTime, getDayAgo } from '@/utils'

export default {
  components: {
    loading
  },
  data() {
    return {
      loadfull: false,
      id: 'sport',
      chart: null,
      time: [],
      sport: [],
      datepicker: [],
      type: '',
      sportData: [],
      rangeDay: 30
    }
  },
  created() {
    this.serviceId = this.$route.params.id
    this.getSportList(30)
  },
  mounted() {
    this.chart = echarts.init(document.getElementById(this.id))
  },
  methods: {
    getSportList(day) {
      this.rangeDay = day
      this.loadfull = true

      let start, end
      if (day) {
        start = getDayAgo(day)
        end = formatTime(new Date(), 'yyyy-MM-dd')
      } else {
        if (this.datepicker.length > 0) {
          start = this.datepicker[0]
          end = this.datepicker[1]
        } else {
          this.$notify({ title: '提示', message: '请选择时间', type: 'error', duration: 2500 })
          return 
        }
      }

      this.$api.order.dataTrend
        .getSportData({
          params: { service_id: this.serviceId, start: start, end: end }
        })
        .then(res => {
          this.loadfull = false
          var response = res
          if (response.code === 200) {
            var list = response.data.list
            this.sportData = list
            this.datepicker = [list[0][0], list[list.length - 1][0]]
            const time = [], sport = []
            response.data.list.forEach(item => {
              time.push(item[0])
              sport.push(item[1])
            })
            this.setLine(time, sport)
          } else if (response.code === 200103) {
            this.$confirm('登录过期，请重新登录')
              .then(_ => {
                window.localStorage.clear()
                this.$router.push('/login')
              })
              .catch(_ => {})
          }
        })
        .catch(error => {
          this.loadfull = false
          console.log(error)
        })
    },
    setLine(time, sport) {
      this.chart.setOption({
        title: {
          text: 'S轻体运动趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        toolbox: {
          show: true,
          feature: {
            // dataZoom: {
            //   yAxisIndex: 'none'
            // },
            // dataView: {readOnly: false},
            // magicType: {type: ['line']},
            // restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: time
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 步'
          }
        },
        series: [
          {
            name: '运动',
            type: 'line',
            data: sport,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      })
    }
  }
}
</script>

<style>
.user-content .week_type {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c4c4c4;
  color: #1f2d3d;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.user-content .week_type span {
  padding: 10px 15px;
  border-right: 1px solid #c4c4c4;
  display: inline-block;
}
.user-content .week_type span:hover, .user-content .week_type span.active{
  color: #20a0ff;
}
.user-content .week_type span:last-child {
  border-right: none;
}
</style>
